<template>
	<view>
		<cu-custom title="我的小孩" ></cu-custom>
		<view class="form-detail m-t-10" >
			<view class="l-m-b l-m-l">
				
				<text>张三</text><text class="stu-infor">北京附中&nbsp;高三一班</text>
			</view>
			<view class="l-m-b-1 l-m-r t-a-r d-s-f lamo">
				<button class="button-fill bt-grey">修改</button> <button class="button-fill bt-grey"> 删除</button>
			</view>
		</view>
		<view class="form-detail m-t-10" >
			<view class="l-m-b l-m-l">
				
				<text>绑定号码（非必选）</text>
			</view>
			<view class="l-m-b-1 l-m-r">
				<!-- <text>138****8888</text> -->
				<input placeholder="请输入手机号码"/>
				<u-icon name="arrow-right" size="34rpx" color='#333'></u-icon>
			</view>
		</view>
		<view class="form-detail" >
			<view class="l-m-b l-m-l">
				
				<text>学员姓名</text>
				
			</view>
			<view class="l-m-b-1 l-m-r">
				<!-- <text>王五</text> -->
				<input placeholder="请输入学员姓名"/>
				<u-icon name="arrow-right" size="34rpx" color='#333'></u-icon>
			</view>
		</view>
		<view class="form-detail" >
			<view class="l-m-b l-m-l">
				
				<text>性别</text>
			</view>
			<view class="l-m-b-1 l-m-r">
				<!-- <text>女</text> -->
				<view class="uni-list-cell-db">
									<picker @change="bindPickerChange" :value="index" :range="array">
										<view class="uni-input">{{array[index]}}</view>
									</picker>
								</view>
				<u-icon name="arrow-right" size="34rpx" color='#333'></u-icon>
			</view>
		</view>
		<view class="form-detail" >
			<view class="l-m-b l-m-l">
				
				<text>地区</text>
			</view>
			<view class="l-m-b-1 l-m-r">
				<text>年级</text>
				<u-icon name="arrow-right" size="34rpx" color='#333'></u-icon>
			</view>
		</view>
		<view class="form-detail" >
			<view class="l-m-b l-m-l">
				
				<text>年级</text>
			</view>
			<view class="l-m-b-1 l-m-r">
				<picker @change="gradePickerChange" :value="index" :range="gradearray">
					<view class="uni-input">{{gradearray[index]}}</view>
				</picker>
				<u-icon name="arrow-right" size="34rpx" color='#333'></u-icon>
			</view>
		</view>
		<view class="form-detail" >
			<view class="l-m-b l-m-l">
				
				<text>在读信息</text>
			</view>
			<view class="l-m-b-1 l-m-r">
				<text>北京附中</text>&nbsp;&nbsp;<text style="padding-left: 10px;">高三一班</text>
				<u-icon name="arrow-right" size="34rpx" color='#333'></u-icon>
			</view>
		</view>
		<view class="form-detail" >
			<view class="l-m-b l-m-l">
				
				<text>学习科目</text>
			</view>
			<view class="l-m-b-1 l-m-r">
				<text>钢琴、</text><text>绘画、</text><text>物理、</text><text>数学</text>
				<u-icon name="arrow-right" size="34rpx" color='#333'></u-icon>
			</view>
		</view>
		<view class="form-detail l-m-l"  style="width: 100%;display: inline-table;">
			<view class="l-m-b  c-l">
				
				<text>学生简介描述</text>
			</view>
			<view class="l-m-b-1 c-l">
				<textarea placeholder="请输入学生简介" style="font-size: 14px;"></textarea>
			</view>
			
		</view>
		<view class="cle-p">
			<!-- <u-icons type="plusempty" size="34rpx" color='#333'></u-icons> -->
			<uni-icons type="plusempty" size="30"></uni-icons>
			<text class="add-chil">添加小孩</text>
		</view>
		<view class="uni-form-item uni-column in-text b-t-n b-u-c m-15 m-t-30 c-l m-b-30" style="padding-bottom: 30px;">
			<button> 提交</button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 array: ['男', '女'],
				 gradearray: ['初一', '初二','初三','高一','高二','高三'],
				 index: 0,
			};
		},
		methods:{
			bindPickerChange: function(e) {
			            console.log('picker发送选择改变，携带值为', e.detail.value)
			            this.index = e.detail.value
			        },
					gradePickerChange: function(e) {
			            console.log('picker发送选择改变，携带值为', e.detail.value)
			            this.index = e.detail.value
			        },
		}
	}
</script>

<style lang="less" scoped>
@import '@/static/css/common.css';
.m-15{ margin: 15px;}
.b-g-w{ background: #fff;}
.text-1{ font-size: 16px; font-weight: bold;}
.form-detail{ height: 50px; line-height: 50px; font-size: 14px;
input{ text-align: right; height: 50px; line-height: 50px;}
}
.form-detail{ background: #fff; font-size: 32rpx; border-bottom: 1px solid #f8f8f8;  height: 98rpx; line-height: 98rpx;}
.l-m-b{ display: flex;  font-size: 14px;  font-weight: bold;
uni-image{ max-height: 35rpx;max-width: 40rpx; margin-top: 30rpx;}
}
.img-s{ height: 35px; width: 35px;}
.l-m-l{ float: left; padding-left: 35rpx;}
.l-m-r{ float: right; padding-right: 35rpx; height: 98rpx; line-height: 98rpx;  text-align: right; display: ;}
uni-image>div, uni-image>img{ height: 15rpx !important; width: 15rpx !important;}
.icon1{ color: #000;}
.text-3{ border: 1px solid #f8f8f8; padding: 15px;}
.b-t-n{ border-bottom: none;}
.b-u-c button{ background: #EA3457; color: #fff; border: none; width: 100%; border-radius: 50rpx;}
.h-80{ height: 80px; line-height: 80px;}
.stu-infor{ padding-left: 15px; font-weight: normal; color: #999;}
.button-fill{ border-radius: 40rpx; margin-top: 19rpx; height: 60rpx; line-height: 60rpx; width: 120rpx; font-size: 14px; margin-left: 10px;}
.bt-grey{border: 1px solid #999; color: #666; background: #fff;}
.lamo{height: 50px; line-height: 50px;}
.cle-p{ font-size: 18px; height: 80px; line-height: 80px; text-align: center; clear: both;
text.add-chil{ padding-left: 15px;}
}
.uniui-plusempty{ border: 2px solid #666; border-radius: 30px;}
.in-text{ }
.l-m-b-1{font-size: 14px;display: flex;
uni-image{ max-height: 35rpx;max-width: 40rpx; margin-top: 30rpx;}
input{font-size: 14px;}
}
</style>
